<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="场地详情" autoBack>
			</u-navbar>
		</view>


		<view class="con-body">
			<view style="padding: 20rpx; color: #0B868E;">
				{{note}}
			</view>
			<!-- 填写信息 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="user-list">
						<view style="padding-left: 30rpx; padding-right: 30rpx;">
							<u-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
								<u-form-item label="预约时间" leftIcon="https://s4.ax1x.com/2022/03/04/bUZxPS.png"
									prop="time" labelWidth="100" borderBottom @click="showTime = true; hideKeyboard()">
									<u-input disabled v-model="model1.time" placeholder="请选择预约时间" border="none"
										disabledColor="#FFFFFF" style="background-color: #FFFFFF;">
									</u-input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>
							</u-form>
						</view>
						<u-line></u-line>
						<view class="user-list-cell" v-for="(item, index) in serviceList">
							<view class="main-service uni-cell-90"
								style="width: 96%; margin-left: 2%; border-radius: 20rpx;">
								<view class="user-list" @click="join(index)">
									<u-image :src="item.image" width="100%" height="280rpx"></u-image>
								</view>
							</view>

						</view>
						<view class="user-list" style="margin-top: 20rpx;">
							<view
								style="padding: 5rpx 20rpx; text-align: center; font-size: 28rpx; float: left; height: 40rpx;"
								v-for="(item,index) in themesList">
								<view class="btn-view1">
									<text>{{item.name}}</text>
								</view>
							</view>
							<view style="clear: both; height: 80rpx;"></view>
						</view>
					</view>
				</view>

				<u-button :customStyle="btnStyle" @click="next">确定预约</u-button>
			</view>
			<u-toast ref="uToast" :loading="true"></u-toast>

			<u-calendar :show="showTime" mode="range" @confirm="timeSelect"></u-calendar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginLeft: '2%',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF',
					position: 'fixed',
					bottom: '40rpx'
				},
				note: '共享场地每天09：00-22：00开放，使用前请到物业中心前台登记，设施损坏按原价赔偿，如有疑问，请咨询服务中心前台',
				showTime: false,
				model1: {
					time: '',
					nid: 0,
					tools: ['共享场地'],
					start_time: '',
					end_time: ''
				},
				serviceList: [{
					title: '共享场地',
					image: 'https://resourse.cnlhjt.com/upload/20220825/f2164e7cd45dac271c6b4f0020b9506f.png'
				}],
				themesList: [{
						tid: 1,
						name: '可做饭'
					},
					{
						tid: 2,
						name: 'KTV'
					},
					{
						tid: 3,
						name: '视频会议'
					},
					{
						tid: 4,
						name: '有沙发位'
					}
				]
			}
		},
		methods: {

			timeSelect(e) {
				this.model1.time = e[0] + '~' + e[e.length - 1];
				this.model1.start_time = e[0];
				this.model1.end_time = e[e.length - 1];
				this.showTime = false;
			},
			next() {
				if(this.model1.time == ''){
					this.$refs.uToast.show({
					
						type: 'error',
						message: '请选择预约时间'
					})
					return;
				}
				this.$u.route({
					url: "/pagesShare/kitchen/field-detail",
					params: {
						item: JSON.stringify(this.model1)
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.iconType2 {
		position: fixed;
		bottom: 60rpx;
		display: flex;
		border: #E1E1E1 1rpx solid;
		border-radius: 40rpx;
		justify-content: space-between;
		width: 90%;
		margin-left: 1%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #FFFFFF;

		.text1 {
			color: red;
			margin-top: 27rpx;
			width: 30%;
			margin-left: 200rpx;
		}

		.text2 {
			color: #FFFFFF;
			text-align: center;
			width: 30%;
			background-image: url("https://resourse.cnlhjt.com/upload/20220825/79b8644697f64c4b587f78e6d891f1e8.png");
			background-size: 100% 100%;
		}
	}

	.btn-view1 {
		color: #666666;
		border: #666666 1rpx solid;
		border-radius: 30rpx;
		padding: 2rpx 25rpx;
	}
</style>
